<template>
  <div class="BreaDcrumb">
    <div class="bd-left">
      <span
        class="title text-select"
        v-show="isshow==0"
      >全部文件</span>
      <div
        class="bd-brea"
        v-show="isshow==1"
      >
        <p
          class="bd-brer-fanhui cursor-p"
          @click="fanHui"
        >
          返回上一级
          <span class="shu">&ensp;|&ensp;</span>
        </p>
        <div class="bread">
          <span
            class="text text-select cursor-p"
            @click="rootClick"
          >全部文件</span>
          <span class="icon-right">></span>
        </div>
        <div
          class="bread"
          v-for="(item,index) in list"
          :key='index'
        >
          <span
            class="text text-select cursor-p"
            :style="{'color': index == listLength ? '#afb3bf':'#06a7ff'}"
            @click="breadClick(index)"
          >
            {{item}}
          </span>
          <span class="icon-right text-select">{{index == listLength ? '':'>'}}</span>
        </div>
      </div>
    </div>
    <div class="bd-right">
      <span class="text">已全部加载，共&ensp;{{total}}&ensp;个</span>
    </div>
  </div>
</template>

<script>
const pattern = /:/
export default {
  name: 'BreaDcrumb',
  props: {
    listpro: Array,
    total: {
      type: [Number, String],
      default: 0
    }
  },
  data () {
    return {
      list: [],
      isshow: 0,
      listLength: ''
    }
  },
  watch: {
    listpro (newValue, oldValue) {
      if (newValue.length == 0) {
        this.isshow = 0
        return
      }
      this.sliceArr(newValue)
      this.isshow = 1
    }
  },
  methods: {
    // 点击名字
    breadClick (index) {
      if (this.list[index] === '...' || index === this.list.length) return;
      // 正则匹配   判断当前是不是搜索
      const text = pattern.test(this.list[index])
      if (text) {
        this.$emit('breadEmit', false)
        return
      }
      const propsindex = this.listpro.findIndex(item => item === this.list[index])
      const xinlist = this.listpro.slice(0, propsindex + 1)
      this.sliceArr(xinlist)
      this.$emit('breadEmit', xinlist, propsindex + 1)
    },
    // 点击全部文件
    rootClick () {
      this.list = []
      this.isshow = 0
      this.$emit('rootEmit')
    },
    // 处理数据
    sliceArr (list) {
      let arr = []
      if (list.length >= 5) {
        const arrlice = list.slice(list.length - 4, list.length - 1)
        arr = ['...', ...arrlice]
      } else {
        arr = list
      }
      this.listLength = arr.length - 1
      this.list = arr
    },
    // 返回上一级
    fanHui () {
      let listproArr = this.listpro
      listproArr.pop()
      this.$emit('popEmit', listproArr)
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin text {
  font-size: 14px;
  font-weight: 700;
  color: $textColor;
  line-height: 30px;
}

.text-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.BreaDcrumb {
  position: relative;
  width: 100%;
  height: 30px;
  color: $textColor;
  @include dif-alc;

  .bd-left {
    width: 50%;
    height: 100%;

    .title {
      @include text;
      margin-left: 20px;
    }

    .bd-brea {
      width: 100%;
      height: 100%;
      margin-left: 20px;
      @include dif-alc;

      .bd-brer-fanhui {
        font-size: 12px;
        color: #06a7ff;
        line-height: 30px;

        .shu {
          color: rgb(212, 212, 212);
        }
      }

      .bread {
        min-width: 30px;
        height: 30px;
        @include dif-alc;

        .text {
          font-size: 12px;
          color: #06a7ff;
        }

        .icon-right {
          line-height: 30px;
          margin: 0 4px;
          color: #c4d8f4;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }

  .bd-right {
    width: 50%;
    height: 100%;
    text-align: right;

    .text {
      @include text;
      margin-right: 50px;
    }
  }
}
</style>